<template>
    <div class="header">
        <div class="wrapper">
            <!-- 中间标题 -->
            <div class="middle">
                <div class="middle1">农业机械化生产态势展示系统</div>
                <div class="middle2">Agricultural mechanization production situation display system</div>
                <img src="@/assets/img/header/bg_head.png" />
            </div>

            <!-- 用户 -->
            <div class="dropBox">
                <img class="dropImg2" src="@/assets/img/header/return.png" alt="">
                <div class="dropDown">
                    <span class="dropName1" :title="username">{{ username }}</span>
                    <span class="dropName2">您好！</span>
                </div>
            </div>

            <!-- 左边导航tab -->
            <div class="left_tab">
                <div v-for="(item, index) in leftBtns" :key="index"
                    :class="['header_left', currentIndex == index ? 'active' : '']"
                    @click="changeBtn(index, 'header_left')">
                    <span>{{ item }}</span>
                </div>
            </div>

            <!-- 右边导航tab -->
            <div class="right_tab">
                <div v-for="(item, index) in rightBtns" :key="index"
                    :class="['header_right', currentIndex == index + 2 ? 'active' : '']"
                    @click="changeBtn(index, 'header_right')">
                    <span>{{ item }}</span>
                </div>
            </div>

            <!-- 时间 -->
            <div class="time">
                <span class="time1">{{ time }}</span>
                <span class="time2">{{ time1 }}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "headerMain",
    data() {
        return {
            username: "用户",
            currentIndex: 0,
            leftBtns: ['总览', '作业中心'],
            rightBtns: ['指挥调度', '作业统计'],
            timer: null,
            time: '',
            time1: '',
            time2: '',
        }
    },
    mounted() {
        this.getTime()
        this.timer = setInterval(this.getTime, 1000)
    },
    methods: {
        //  时间格式化
        getTime() {
            let myDate = new Date()
            let wk = myDate.getDay()
            let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            this.time = this.dayjs().format('YYYY/MM/DD')
            this.time1 = this.dayjs().format('HH:mm:ss')
            this.time2 = weeks[wk]
        },
    }
}
</script>

<style scoped lang="scss">
.header {
    position: relative;
    z-index: 1002;

    .wrapper {
        display: flex;
        z-index: 999;
        position: relative;

        .middle {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 0;
            width: 1920px;
            height: 141px;
            // background: url(~@/assets/head/bg2.png) no-repeat;
            font-size: 48px;
            font-family: PangMenZhengDao;
            color: #ffffff;
            line-height: 100px;
            letter-spacing: 6px;
            text-shadow: -2px -4px 0px rgba(0, 33, 57, 0.5);

            background: linear-gradient(to top, rgba(0, 14, 35, 0) 0%, #000e23 100%);

            img {
                width: 1920px;
                height: 141px;
                position: absolute;
                left: 0%;
                top: 0;
                z-index: -1;
            }

            span {
                font-size: 48px;
                font-family: PangMenZhengDao;
                color: #ffffff;
                line-height: 55px;
                letter-spacing: 2px;
                text-shadow: -2px -4px 0px rgba(0, 33, 57, 0.5);
            }

            .middle1 {
                width: 605px;
                height: 57px;
                font-family: YouSheBiaoTiHei;
                font-size: 44px;
                color: #ffffff;
                line-height: 57px;
                letter-spacing: 6px;
                text-shadow: 0px 5px 0px rgba(0, 0, 0, 0);
                text-align: left;
                font-style: normal;
                background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#84d9fb));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                margin: 0 auto;
                margin-top: 14px;
            }

            .middle2 {
                height: 18px;
                font-family: DINOT, DINOT;
                font-weight: normal;
                font-size: 14px;
                color: #3b4e5a;
                line-height: 18px;
                text-shadow: 0px 5px 0px rgba(0, 0, 0, 0);
                text-align: left;
                font-style: normal;
                text-transform: uppercase;
                background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ecf5ff), to(#addaf4));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                margin: 0 auto;
                margin-top: -5px;
                letter-spacing: 0px;
                text-align: center;
            }
        }

        .dropBox {
            position: absolute;

            .dropImg1 {
                float: left;
                margin: 19px 0 0 21px;
            }

            .dropDown {
                float: left;
                margin: 16px 0 0 16px;

                .dropName1 {
                    float: left;
                    width: 50px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    font-family: YouSheBiaoTiHei;
                    font-size: 16px;
                    color: #FFFFFF;
                    line-height: 22px;
                    text-shadow: 0px 5px 0px rgba(0, 0, 0, 0.5);
                    text-align: left;
                    font-style: normal;
                    background: linear-gradient(180deg, #FFFFFF 0%, #28CFFF 100%);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    margin-right: 17px;
                }

                .dropName2 {
                    float: left;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 16px;
                    color: #FFFFFF;
                    line-height: 22px;
                    text-shadow: 0px 2px 3px rgba(0, 48, 72, 0.5);
                    text-align: left;
                    font-style: normal;
                }
            }

            .dropImg2 {
                margin: 17px 0 0 17px;
                float: left;
            }
        }

        .left_tab {
            position: absolute;
            left: 207px;
            top: 7px;
            display: flex;
            z-index: 99;

            .header_left {
                width: 187px;
                height: 39px;
                background: url(~@/assets/img/header/icon12.png) no-repeat;
                flex-shrink: 0;
                font-size: 20px;
                line-height: 39px;
                text-align: center;
                cursor: pointer;
                padding-left: 5px;

                span {
                    display: inline-block;
                    width: 87px;
                    height: 29px;
                    font-family: YouSheBiaoTiHei;
                    font-size: 22px;
                    color: #b0e0ff;
                    line-height: 29px;
                    text-shadow: 0px 1px 0px rgba(0, 32, 56, 0);
                    text-align: center;
                    font-style: normal;
                    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#89d9ff));
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }

                &:nth-of-type(2) {
                    margin-left: 6px;
                }

                &:nth-of-type(3) {
                    margin-left: 6px;
                }

                &:nth-of-type(4) {
                    margin-left: 6px;
                }

                &.active {
                    background: url(~@/assets/img/header/icon11.png) no-repeat;

                    span {
                        display: inline-block;
                        width: 87px;
                        height: 29px;
                        font-family: YouSheBiaoTiHei;
                        font-size: 22px;
                        color: #b0e0ff;
                        line-height: 29px;
                        text-shadow: 0px 1px 0px rgba(0, 32, 56, 0);
                        text-align: center;
                        font-style: normal;
                        background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#fff076));
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                }
            }
        }

        .right_tab {
            display: flex;
            position: absolute;
            right: 225px;
            top: 7px;
            z-index: 99;

            .header_right {
                width: 187px;
                height: 39px;
                background: url(~@/assets/img/header/icon13.png) no-repeat;
                flex-shrink: 0;
                font-size: 20px;
                line-height: 39px;
                text-align: center;
                cursor: pointer;
                padding-right: 5px;

                span {
                    display: inline-block;
                    width: 87px;
                    height: 29px;
                    font-family: YouSheBiaoTiHei;
                    font-size: 22px;
                    color: #b0e0ff;
                    line-height: 29px;
                    text-shadow: 0px 1px 0px rgba(0, 32, 56, 0);
                    text-align: center;
                    font-style: normal;
                    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#89d9ff));
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }

                &:nth-of-type(2) {
                    margin-left: 6px;
                }

                &:nth-of-type(3) {
                    margin-left: 6px;
                }

                &:nth-of-type(4) {
                    margin-left: 6px;
                }

                &.active {
                    background: url(~@/assets/img/header/icon14.png) no-repeat;

                    span {
                        display: inline-block;
                        width: 87px;
                        height: 29px;
                        font-family: YouSheBiaoTiHei;
                        font-size: 22px;
                        color: #b0e0ff;
                        line-height: 29px;
                        text-shadow: 0px 1px 0px rgba(0, 32, 56, 0);
                        text-align: center;
                        font-style: normal;
                        background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#fff076));
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                }
            }
        }

        .time {
            position: absolute;
            top: 15px;
            right: 21px;

            .time1 {
                display: inline-block;
                font-family: YouSheBiaoTiHei;
                font-size: 14px;
                color: #7bf3fb;
                line-height: 18px;
                text-shadow: 0px 2px 0px rgba(0, 32, 56, 0.5);
                text-align: right;
                font-style: normal;
                margin-right: 4px;
                vertical-align: middle;
                margin-top: -7px;
            }

            .time2 {
                display: inline-block;
                font-family: YouSheBiaoTiHei;
                font-size: 20px;
                color: #ffffff;
                line-height: 26px;
                text-shadow: 0px 2px 0px rgba(0, 32, 56, 0.5);
                text-align: right;
                font-style: normal;
            }
        }
    }
}
</style>